<template>
  <div class="themenu">
    <van-search @click="goSearch"
                placeholder="请输入搜索关键词" />
    <div class="themenu-box">
      <!-- 侧边导航 -->
      <div class="themenu-left">
        <van-sidebar v-model="activeKey">
          <van-sidebar-item :title="item.typeDesc"
                            v-for="(item,index) in themenutType"
                            :key="index"
                            @click="getgoodsData(item.type)" />
        </van-sidebar>
      </div>

      <div class="themenu-right">

        <div class="product-box">
          <div class="product-item"
               v-for="(item, index) in goodsData"
               :key="index"
               @click="viewProDetail(item.pid)">
            <van-tag class="ithot"
                     mark
                     type="primary"
                     v-if="item.isHot==1">hot</van-tag>
            <div>
              <img class="auto-img"
                   :src="item.smallImg"
                   alt="">
            </div>
            <div class="name">{{item.name}}</div>
            <div class="enname">{{item.enname}}</div>
            <div class="price"> &yen; {{item.price}}</div>
          </div>
        </div>

      </div>
      <div class="ThereAreNoMore">没有更多了...</div>
    </div>

  </div>
</template>

<script>

export default {
  name: "Themenu",
  data () {
    return {
      activeKey: 0,
      // 菜单类型数据
      themenutType: [],
      // 商品数据
      goodsData: []
    };

  },


  created () {
    // 获取商品类型
    this.getThemenutType()
  },
  methods: {

    // 搜索页
    goSearch () {
      this.$router.push({ name: 'Search' })
    },

    // 获取商品类型
    getThemenutType () {
      this.axios({
        method: 'get',
        url: '/type',
      }).then(result => {
        if (result.data.code == 400) {
          // unshift() 方法将新项添加到数组的开头，并返回新的长度。如需在数组末尾添加新项，请使用 push() 方法。
          result.data.result.unshift({ type: 'isHot', typeDesc: '热卖推荐' })
          this.themenutType = result.data.result

          // 定义一个变量用来存商品数据
          let type = result.data.result[this.activeKey].type

          // 执行点击导航条的方法
          this.getgoodsData(type)
        }
      })
    },

    // 获取商品类型数据
    getgoodsData (type) {
      let key = ''
      let value = ''
      if (type == 'isHot') {
        key = 'isHot'
        value = 1
      } else {
        key = 'type'
        value = type

      }
      this.axios({
        method: 'get',
        url: '/typeProducts',
        params: {
          key,
          value
        }

      }).then(result => {
        if (result.data.code == 500) {
          this.goodsData = result.data.result
        }
      })
    },

    viewProDetail (pid) {
      this.$router.push({ name: 'GoodsDetails', params: { pid } });
    }

  },


}
</script>

<style lang="scss" scoped>
.themenu {
  padding-top: 80px;
  .van-search {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 35px;
    background-color: #0c34ba;
  }
  .themenu-box {
    display: flex;
    height: 100%;
    margin-bottom: 100px;
    position: relative;
    .ThereAreNoMore {
      position: absolute;
      right: 110px;
      bottom: -40px;
    }
    .themenu-left {
      width: 100px;
      height: 100%;
      .van-sidebar {
        width: 100px;
        position: fixed;
        top: 79px;
        bottom: 0;
        background-color: #e6e6e6;
      }
      .van-sidebar-item {
        background-color: #e6e6e6;
        padding: 10px 15px;
      }
      .van-sidebar-item--select,
      .van-sidebar-item--select:active {
        border-radius: 0 50px 50px 0;
        padding: 10px 15px;
        background-color: #bdbdbd;
        color: #000;
        font-weight: bold;
      }
      .van-sidebar-item--select::before {
        position: absolute;
        left: -10px;
        width: 20px;
        height: 20px;
        border-radius: 50px;
        background-color: #0c34ba;
      }
    }
    .themenu-right {
      width: calc(100% - 80px);
      height: 100%;
      overflow-y: auto;
      padding-left: 10px;
      background-color: #fff;
      .product-box {
        display: flex;
        padding: 10px;
        flex-wrap: wrap;
        position: relative;
        .ithot {
          position: absolute;
          right: 20px;
          background-color: #0c34ba;
          color: #fff;
          border-radius: 0 0 5px 5px;
        }
        .product-item {
          //使最后一个没有右边框
          width: calc(54% - 20px);
          background-color: #f2f2f2;
          margin-bottom: 10px;
          margin-right: 10px;
          padding: 10px;
          position: relative;
          border-radius: 8px;
          &:nth-child(2n) {
            margin-right: 0;
          }
          .auto-img {
            border-radius: 10px;
          }
          .name {
            width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #848484;
          }
          .enname {
            width: 80px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #848484;
          }
        }
      }
    }
  }
}
</style>